<template>
    <div class="sign-container">
        <div>
            <!-- <tempalte v-if="!value"> -->
            <div class="sign-borad" v-show="!value && !disabled">
                <div class="padding__wrap" style="border-bottom: 1px solid #d9d9d9">
                    <div class="sign__tip-text">请在区域内书写，书写完毕后需确认保存。</div>
                </div>
                <div class="sign__box-wrap" ref="signWrap">
                    <canvas ref="signBox"></canvas>
                </div>
                <el-row class="padding__wrap" align="middle" style="width: 100%; border-top: 1px solid #d9d9d9">
                    <el-row class="sign__left-box">
                        <el-button plain size="small" @click="clearSign">清除</el-button>
                    </el-row>
                    <el-row class="sign__right-box">
                        <el-button type="primary" size="small" @click="saveSign">确定并保存</el-button>
                    </el-row>
                </el-row>
            </div>

            <el-row align="middle" v-show="value">
                <img class="sign__img" :src="srcValue" />
                <div @click="deleteValue" v-if="!disabled">
                    <ElIconRemoveFilled style="width: 25px; height: 25px; color: #ff5959" />
                </div>
            </el-row>
        </div>
    </div>
</template>

<script>
import SignaturePad from 'signature_pad';
export default {
    emits: ['update:modelValue'],
    props: {
        modelValue: {
            type: String,
            default: ''
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        value: {
            get() {
                return this.modelValue;
            },
            set(value) {
                console.log(value);
                this.$emit('update:modelValue', value);
            }
        },
        srcValue() {
            return '/api' + this.modelValue;
        }
    },

    mounted() {
        this.$nextTick(() => {
            this.width = this.$refs.signWrap.clientWidth;
            this.init();
        });
    },
    data() {
        return {
            canvasDom: null,
            context: '',
            width: 0,
            height: 150
        };
    },
    methods: {
        // 初始化画板
        init() {
            this.canvasDom = this.$refs.signBox;
            this.canvasDom.width = this.width;
            this.canvasDom.height = this.height;
            this.context = new SignaturePad(this.canvasDom, {});
        },
        // 清理画板
        clearSign() {
            this.context.clear();
        },
        // 保存签字
        saveSign() {
            const image = this.saveAsImg();
            const file = this.dataUrlToFile(image.src, 'signature.png');
            this.uploadFile(file);
            console.log(image, file);
        },
        saveAsImg() {
            const image = new Image();
            image.src = this.context.toDataURL('image/png');
            this.$emit('confirm', image.src);
            // return image.src;
            return image;
        },
        dataUrlToFile(dataurl, filename) {
            const arr = dataurl.split(',');
            const mime = arr[0].match(/:(.*?);/)[1];
            const bstr = atob(arr[1]);
            let n = bstr.length;
            const u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new File([u8arr], filename, { type: mime });
        },
        uploadFile(file) {
            const formData = new FormData();
            formData.append('file', file);
            formData.append('username', 'Chris');
            console.log(formData);
            this.$HTTP.post(process.env.VUE_APP_API_URL + '/file/upload', formData).then((res) => {
                console.log(res);
                this.value = res.data.url;
            });
        },
        // 删除modelValue的值
        deleteValue() {
            this.value = '';
            this.clearSign();
        }
    }
};
</script>

<style lang="scss" scoped>
.sign-container {
    width: 100%;
}
.sign-borad {
    border: 1px solid #d9d9d9;
}
.sign__box-wrap {
    background-color: #eafafa;
}
.padding__wrap {
    padding: 5px 15px;
}
.sign__right-box {
    margin-left: 10px;
}
.sign__tip-text {
    font-size: 14px;
    color: #999;
    font-family: '微软雅黑';
}
.sign__img {
    width: 50%;
    height: 50%;
}
</style>
